<script setup lang="ts">
import { Graph } from '@antv/x6'
import '../shapes'
import { initGraph } from './utils'

const props = defineProps<{
  jsonData: any
}>()

const emits = defineEmits(['load'])

onMounted(() => {
  init()
})

// region TODO 初始化
function init () {
  const container = flowContainerRef.value
  graph.value = initGraph({ options: { container }, json: props.jsonData })
  emits('load', graph.value)
}
onBeforeUnmount(function () {
  graph.value.dispose()
})
// endregion

// region TODO 画布
const graph = shallowRef<Graph>(null)
const flowContainerRef = ref<HTMLDivElement>()
// endregion

</script>

<template>
  <div ref="flowContainerRef" class="flow-container" />
</template>
<style lang="scss">
@import "../style";
</style>
<style scoped lang="scss">
.flow-container:deep {
  // 连接桩
  .x6-port {
    display: none;
  }
}
</style>
